﻿@page "/layouts/grid"

<Pager Title="栅格(Grid)" Description="使用我们强大的移动优先CssClassbox网格构建所有形状和大小的布局，包括 12 个列系统，6 个默认响应层">
	<Demo Title="示例">
		<Run>
			<Container AdditionalCssClass="@("example-grid")">
				<Row>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>
	<Row>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
	<Demo Title="均等宽度">
		<Description>
			每一列的宽度相同。
		</Description>
		<Run>
			<Container AdditionalCssClass="example-grid">
				<Row>
					<Column>1 of 2</Column>
					<Column>2 of 2</Column>
				</Row>
				<Row>
					<Column>1 of 3</Column>
					<Column>2 of 3</Column>
					<Column>3 of 3</Column>
				</Row>
			</Container>
		</Run>
		<Code>
@MD.Write(@"
```html
<Container>
	<Row>
		<Column>1 of 2</Column>
		<Column>2 of 2</Column>
	</Row>
	<Row>
		<Column>1 of 3</Column>
		<Column>2 of 3</Column>
		<Column>3 of 3</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
	<Demo Title="设置某一列的宽度">
		<Description>
			设置列 <code>Col</code> 参数控制列的宽度，其他栅格的大小将自动布局
		</Description>

		<Run>
			<Container AdditionalCssClass="example-grid">
				<Row>
					<Column>1 of 2</Column>
					<Column Col="Col.Is6">2 of 3（占6列）</Column>
					<Column>3 of 3</Column>
				</Row>
				<Row>
					<Column>1 of 3</Column>
					<Column Col="Col.Is5">2 of 3（占5列）</Column>
					<Column>3 of 3</Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>
	<Row>
		<Column>1 of 2</Column>
		<Column Col=""Col.Is6"">2 of 3（占6列）</Column>
		<Column>3 of 3</Column>
	</Row>
	<Row>
		<Column>1 of 3</Column>
		<Column Col=""Col.Is5"">2 of 3（占5列）</Column>
		<Column>3 of 3</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
	<Demo Title="支持响应式布局">
		<Run>
		<Container AdditionalCssClass="example-grid">
			<Row>
				<Column Col="Col.Is2.Is5.OnLG">LG 时占比为5，其他时候占比为 2</Column>
				<Column Col="Col.Is6.OnSM">SM 时占比为6，其他时候则自适应宽度</Column>
				<Column>3 of 3</Column>
			</Row>
		</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>
	<Row>
		<Column Col=""Col.Is2.Is5.OnLG"">LG 时占比为5，其他时候占比为 2</Column>
		<Column Col=""Col.Is6.OnSM"">SM 时占比为6，其他时候则自适应宽度</Column>
		<Column>3 of 3</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
	<Demo Title="固定列数">
		<Description>
			使用 <code>RowCols</code> 静态对象来设置每行的固定列数。
		</Description>
		<Run>
			<Container AdditionalCssClass="example-grid">
				<Row Cols="RowCols.Is4">
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>
	<Row Cols=""RowCols.Is4"">
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
	<Demo>
		<Description>
			<code>RowCols.IsAuto</code> 自适应列的宽度。
		</Description>
		<Run>
			<Container AdditionalCssClass="example-grid">
				<Row Cols="RowCols.IsAuto">
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>
	<Row Cols=""RowCols.IsAuto"">
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
		<Demo>
			<Description>
				在 <code>lg</code> 时固定列数是 3，其他时候的固定列数是 2。
			</Description>
		<Run>
			<Container AdditionalCssClass="example-grid">
				<Row Cols="RowCols.Is2.Is3.OnLG">
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column>列</Column>
					<Column Col="Col.Is4.Is2.OnLG">列</Column>
					<Column Col="Col.Is4.Is2.OnLG">列</Column>
					<Column Col="Col.Is4.Is2.OnLG">列</Column>
					<Column Col="Col.Is4.Is2.OnLG">列</Column>
					<Column Col="Col.Is4.Is2.OnLG">列</Column>
					<Column Col="Col.Is4.Is2.OnLG">列</Column>
				</Row>
			</Container>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Container>
	<Row Cols=""RowCols.Is2.Is3.OnLG"">
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column>列</Column>
		<Column Col=""Col.Is4.Is2.OnLG"">列</Column>
		<Column Col=""Col.Is4.Is2.OnLG"">列</Column>
		<Column Col=""Col.Is4.Is2.OnLG"">列</Column>
		<Column Col=""Col.Is4.Is2.OnLG"">列</Column>
		<Column Col=""Col.Is4.Is2.OnLG"">列</Column>
		<Column Col=""Col.Is4.Is2.OnLG"">列</Column>
	</Row>
</Container>
```
")
		</Code>
	</Demo>
</Pager>